<template>
	<div id ="rmlist">
		<el-row>
			<el-col :span="6">
				<el-card shadow="never">
				  <div slot="header" class="clearfix">
				    <el-button type="primary" icon="el-icon-plus" 
							   class="circle_btn" 
							   @click="addRm()">
					</el-button>
				  </div>
				  <el-tree :data="rmlistTree" :props="defaultProps" 
				  		   :highlight-current="true" :expand-on-click-node="false" 
				  		   @node-click="handleNodeClick" class="my_panel" 
				  		   v-bind:style="{height: dynHeight}">
					</el-tree>
				</el-card>	
			</el-col>
			<el-col :span="18" >
				<el-card class="box-card my_panel" v-bind:style="{height: rmdynHeight}" shadow="never">
					<div slot="header" class="clearfix">
						<el-row>
							<el-button type="primary" icon="el-icon-edit" class="circle_btn"></el-button>
							<el-button type="danger" icon="el-icon-delete" class="circle_btn"></el-button>
						</el-row>
					</div>
					<el-row style="margin-bottom: 20px;margin-top: -10px;">
						<span>罗马尼亚现网数据管理需求</span>
					</el-row>
					<el-row style="font-size:14px">
						<el-col :span="5">
							<span>创建人：</span>
							<span style="color:#909399">谭宇均</span>
						</el-col>
						<el-col :span="7">
							<span>创建时间：</span>
							<span style="color:#909399">2018-07-07</span>
						</el-col>
						<el-col :span="5">
							<span>提出人：</span>
							<span style="color:#909399">谭宇均</span>
						</el-col>
						<el-col :span="5">
							<span>提出时间：</span>
							<span style="color:#909399">2018-07-07</span>
						</el-col>
					</el-row>

					<el-row style="font-size:14px;margin-top:10px">
						<el-col :span="5">
							<span>是否分解Story：</span>
							<span style="color:#909399">是</span>
						</el-col>
						<el-col :span="7">
							<span>分析人：</span>
							<span style="color:#909399">谭宇均</span>
						</el-col>
						<el-col :span="5">
							<span>工作量：</span>
							<span style="color:#909399">2Kloc</span>
						</el-col>
					</el-row>
					<el-row style="margin-top:30px">
						<el-col :span="24">
							<el-tabs v-model="activeName" @tab-click="handleClick">
								<el-tab-pane label="方案设计" name="first">
									<el-row :gutter="20">
										<el-col :span="12">
											<span>需求描述</span>
											<div style="font-size:14px;color:#909399;margin-top:10px">
												fefefefefefef
												fefefefffbbf
												wefwrwfwfwdvdfgbgfgfwwded
												efffwefefefwrgbdb
												fefwefwqr3vfvvdf
											</div>
										</el-col>
										<el-col :span="12">
											<span>实现方案</span>
											<div style="font-size:14px;color:#909399;margin-top:10px">
												fefefefefefef
												fefefefffbbf
												wefwrwfwfwdvdfgbgfgfwwded
												efffwefefefwrgbdb
												fefwefwqr3vfvvdf
											</div>
										</el-col>
									</el-row>
								</el-tab-pane>
								<el-tab-pane label="story管理" name="second">配置管理</el-tab-pane>
								<el-tab-pane label="文档管理" name="third">角色管理</el-tab-pane>
								<el-tab-pane label="日志管理" name="fourth">定时任务补偿</el-tab-pane>
							</el-tabs>
						</el-col>
					</el-row>
						
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		created(){
            //初始化需求树
            this.initRmList();
            //动态设置高度
            this.dynHeight=document.documentElement.clientHeight-185+"px";
            this.rmdynHeight=document.documentElement.clientHeight-80+"px";
        },
	    data() {
	      return {
	        rmlistTree: "",
	        defaultProps: {
	          children: 'children',
	          label: 'label'
	        },
	        dynHeight : '',
	        rmdynHeight : '',
	        rmBaseInfo: {
	        	name: '2222',
	        },
	        newRmBaseInfo: {
	        	name: '2222',
	        },
	        activeName: 'first',
	        radio1: '选中且禁用',
	        dialogFormVisible: false,
	        initRM: {
	          name: '',
	          type: ""
	        },
	        rmTypeOptions: [{
	          value: 'IR',
	          label: '原始需求'
	        }, {
	          value: 'SR',
	          label: '系统需求'
	        }],
	        tableData:[]
	      };
		},
	    methods: {
		    handleNodeClick(data,treeNode,self) {
	       		this.selectRM=data;
//	       		console.log(self);
//	       		self.css("background-color","#66B1FF")
	  		},
	      	//加载需求列表
	      	initRmList() {
	      		  this.rmlistTree = [{
		          label: '标准需求',
		          children: [{
		            label: '现网数据处理工具',
		            children: [{
		              label: 'lineing mapping'
		            }]
		          }]
		        }]
	      	},
	      	
	      	handleClick(){
	      		
	      	},
	      	
	      	//添加需求
	      	addRm(){
	      		// this.dialogFormVisible = false;
	      		// if(this.selectRM == null){
		      	// 	var treeNode = {
		      	// 		label: this.newRmBaseInfo.name
		      	// 	};
		      	// 	this.rmlistTree.push(treeNode);
	      		// } else {
	      		// 	var treeNode = {
		      	// 		label: this.newRmBaseInfo.name
		      	// 	};
		      	// 	this.selectRM.children.push(treeNode);
				  // }
				  this.$router.push({ name: 'editrmmgr'});
	      	}
	    }
	}
</script>

<style>
#rmlist{
	overflow-y:hidden;
  overflow-x:hidden;
}

</style>